<template>
  <div class="login">
    <div class="form">
      <div class="title">欢迎登录 远程影像诊断系统</div>
      <div class="container">
        <el-form :model="form" ref="formRef" :rules="rules">
          <el-form-item
            prop="loginName"
          >
            <el-input
              v-model="form.username"
              class="form_input"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item
            prop="loginPwd"
          >
            <img
              src="../../assets/login/mima.svg"
              alt=""
              style="margin-right: 10px"
            />
            <el-input
              type="password"
              v-model="form.password"
              class="form_input"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-button type="primary" @click="submit">登 录 v0.0.1</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const rules = {
  username: [{ required: true, message: "请正确填写用户名", trigger: "blur" }],
  password: [{ required: true, message: "请正确填写密码", trigger: "blur" }],
  captcha: [{ required: true, message: "请正确填写验证码", trigger: "blur" }],
};
const formRef = ref(null);
const form = reactive({
  username: "",
  password: "",
  compoundCode: "2001",
  deptId: "3001",
  captcha: "",
});

const submit = ()=>{
    ElMessage({
          message: "登录成功",
          type: "success",
          duration: 800,
        });
  router.push('/patientCard')
}
</script>
<style scoped lang="scss">
.login {
  height: 100vh;
  background-image: url("@/assets/login_bg.png");
  position: relative;
  .form {
    position: absolute;
    right: 300px;
    top: 30%;

    .title {
      color: #079284;
      font-family: "Alibaba PuHuiTi 2.0";
      font-size: 28px;
      font-style: normal;
      font-weight: 900;
      line-height: 28px; /* 100% */
    }
    .el-form {
      margin-top: 30px;
    }
  }
}
</style>
